let module1 = (function () {
    function query() { }
    function tools() { }

    return {
        name: 'AREA',
        query,
        tools
    }
})()


window.getComputedStyle(document.body).margin



function getCss(element, attr) {
    if (getComputedStyle in window) {
        getCss = function (element, attr) {
            return window.getComputedStyle(element)[attr]
        }
    } else {
        getCss = function (element, attr) {
            return element.currentStyle[attr]
        }
    }

    return getCss(element, attr)
}

getCss(document.body, 'margin')
getCss(document.body, 'padding')
getCss(document.body, 'width')


function fn(...outerArgs) {
    return function anonymous(...innerArgs) {
        let args = outerArgs.concat(innerArgs)
        return args.reduce((n, item) => {
            return n + item
        }, 0)
    }
}



let res = fn(1, 2)(3)
console.log(res) // => 6 1 + 2+ 3


// 聚合函数 compose组合函数， 把多层函数嵌套调用扁平化
const fn1 = x => x + 10
const fn2 = x => x - 10
const fn3 = x => x * 10
const fn4 = x => x / 10

let res = fn4(fn2(fn3(fn1(20))))
console.log(res)

function compose(...funcs) {
    return function anonymous(...args) {
        if (funcs.length === 0) return args
        if (funcs.length === 1) return funcs[0](...args)
        return funcs.concat(funcs).reduce((n, func) => {
            return Array.isArray(n) ? func(...n) : func(n)
        }, args)
    }
}

let res = compose(fn1, fn2, fn4, fn3)(20)




for (let i = 1; i <= 5; i++) {
    let span = document.createElement('span')
    span.innerHTML = i
    document.body.appendChild(span)
}


let frag = document.createDocumentFragment();
for (let i = 1; i <= 5; i++) {
    let span = document.createElement('span')
    span.innerHTML = i
    frag.appendChild(span)
}
document.body.appendChild(frag)
frag = null

let str = ''
for (let i = 1; i <= 5; i++) {
    str += `<span>${i}</span>`
}
document.body.innerHTML = str


/**
 * 按照常理来讲，回流会触发两次
 * 现在浏览器为了减少样式更改引发的回流
 * 新增了渲染队列机制
 *  上一行代码是修改元素样式，此时并没有通知浏览器渲染，而是继续乡下执行
 *  把执行中遇到的修改样式操作全部放置到浏览器的渲染队列当中
 * 
 *  如果不再有修改样式的操作，或者遇到了获取样式的操作（盒子模型或者获取样式），则终端向队列中存放的操作
 *  把先有的先渲染一次（引发一次回流），继续向下执行代码
 */
let box = document.getElementById('box')
setTimeout(() => {
    box.style.top = '100px'
    box.style.left = '100px'
}, 100)



let box = document.getElementById('box')

box.onclick = function () {
    // 去掉动画效果
    box.style.transitionDuration = '0s'
    box.style.top = 0
    box.style.left = 0
    // 获取一下,打断渲染队列
    let a = box.offsetLeft

    // 添加动画效果
    box.style.transitionDuration = '1s'
    box.style.left = '100px'
    // 因为浏览器渲染队列  transitionDuration / left 被覆盖
}
